<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="优惠卷标题"
                      :label-width="formLabelWidth">
          <el-input v-model="form.title"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷名称"
                      :label-width="formLabelWidth">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷面额"
                      :label-width="formLabelWidth">
          <el-input v-model="form.denomination"
                    type="number"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发行数量"
                      :label-width="formLabelWidth">
          <el-input v-model="form.amount"
                    type="number"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请选择商品"
                      :label-width="formLabelWidth">
          <el-cascader placeholder="请选择商品"
                       :options="goods"
                       v-model="form.skuId"
                       :props="{ multiple: true }"
                       filterable></el-cascader>
        </el-form-item>
        <el-form-item label="设置规则"
                      :label-width="formLabelWidth">
          <el-select v-model="ruleList"
                     multiple
                     @change="change"
                     placeholder="请选择">
            <el-option v-for="item in rules"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { goodsListByMenu } from '@/api/menu.js'
import { listAll } from '@/api/rule'
import { create, getById, updateRules } from '@/api/BatchCoupon'
import { listByBatchCouponId } from '@/api/couponRule'
export default {
  data () {
    return {
      dialogFormVisible: false,
      form: {
        rules: []
      },
      formLabelWidth: '120px',
      title: '发放优惠券',
      goods: [

      ],
      rules: [],
      type: '',
      ruleList: []
    }
  },
  created () {

  },
  watch: {
    ruleList (now, old) {
      let diff = now.filter(item => !new Set(old).has(item));
      console.log();
      if (diff.length === 1) {
        let index = diff[0]
        console.log("index::::::::" + index);
        let nowCode = this.rules.find(e => e.id == index).code
        let ruleCodeList = this.rules.filter(e => e.code == nowCode);
        var that = this
        ruleCodeList.forEach(e => {
          console.log(that.ruleList);
          let index = that.ruleList.indexOf(e.id);
          if (index > -1) {
            that.ruleList.splice(index, 1)
          }
        })
        this.ruleList.push(index);
      }







    }
  },
  methods: {
    change (now) {
      // console.log(this.ruleList);
      // console.log(now);
      // console.log(this.rules);
    },
    open (type, id) {
      this.type = type;
      goodsListByMenu().then((res) => {
        this.goods = res.data
      })
      listAll().then((res) => {
        this.rules = res.data
      })
      if (type === 'add') {
        this.form = {}
        this.dialogFormVisible = true;
      } else if (type === 'update') {

        getById({ id: id }).then((res) => {
          var skuId = JSON.parse(res.data.skuId);
          this.form = res.data
          this.form.skuId = skuId
        })
        listByBatchCouponId({ id: id }).then((res) => {
          this.ruleList = [];
          res.data.forEach((e) => {
            this.ruleList.push(e.ruleId);
          });
        })
        this.dialogFormVisible = true;
      }

    },
    submit () {
      this.form.skuId = JSON.stringify(this.form.skuId);
      this.form.rules = this.ruleList
      if (this.type === 'add') {
        create(this.form).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$parent.$refs.tableList.list();
          this.dialogFormVisible = false;
        })
      } else if (this.type === 'update') {
        updateRules(this.form).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        });
        this.dialogFormVisible = false;
      }

    }
  }

}
</script>

<style lang="sass" scoped>
</style>